<template>
	<view class="wrap">
		<u-picker v-model="isShowProduer" :range="ProduersList" @confirm="ProdureContent" mode="selector"></u-picker>
		<u-picker v-model="isShowTime"  @confirm="TimeContent"></u-picker>
		<u-modal v-model="isModalShow" :content="modalContent" @confirm="changeUser" :show-cancel-button="true" @cancel="modelShow=false"></u-modal>
		<u-toast ref="uToast" />
		<u-form :model="vaccine" :rules="rules" label-width="auto" ref="uForm">
			<u-form-item label="疫苗名称" prop="name">
				<u-input v-model="vaccine.name"  input-align="right" disabled></u-input>
			</u-form-item>
			<u-form-item label="疫苗厂商" prop="produrer">
				<u-input v-model="vaccine.produrer"  input-align="right" type="select" @click="isShowProduer=true"></u-input>
			</u-form-item>
			<u-form-item label="接种门诊" prop="address">
				<u-input v-model="vaccine.address"  input-align="right" disabled></u-input>
			</u-form-item>
			<u-form-item label="预约时间" prop="time">
				<u-input v-model="vaccine.time"  input-align="right" type="select" @click="isShowTime=true"></u-input>
			</u-form-item>
			<u-form-item label="接种者" prop="username">
				<u-input v-model="vaccine.username"  input-align="right" disabled @click="isModalShow=true"></u-input>
			</u-form-item>
		</u-form>
		
		<view  style="margin-top: 40rpx;">
			<view class="" style="margin-bottom: 20rpx;">
				预约小贴士
			</view>
			<view class="tips">
				预约接种新冠病毒疫苗，接种者必须满足：
			</view>
			<view class="tips">
				1、18周岁以上
			</view>
			<view class="tips">
				2、携带有效身份证明
			</view>
		</view>
		<u-button type="primary" style="margin-top: 40rpx;" @click="submit">确认提交</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vaccine:{
					name:'新冠病毒疫苗',
					produrer:'',
					address:'',
					time:'',
					username:''
				},
				rules:{
					produrer:[
						{
							required:true,
							message:'请选择疫苗的厂家',
							trigger:['blur']
						}
					],
					time:[
						{
							required:true,
							message:'请选择接种的时间',
							trigger:['blur']
						}
					]
					
				},
				isShowProduer:false,
				ProduersList:['全部','北京生物','武汉生物','科兴中维','康熙诺生物','安徽智飞'],
				isShowTime:false,
				isModalShow:false,
				modalContent:'是否要更换接种者'
			}
		},
		methods: {
			ProdureContent(e){
				this.vaccine.produrer = this.ProduersList[e[0]]
			},
			TimeContent(e){
				this.vaccine.time = e.year + '-' + e.month + '-' + e.day
			},
			submit(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uni.setStorage({
							key:'vaccine',
							data:this.vaccine
						})
						this.$refs.uToast.show({
							title: '预约成功',
							type: 'success',
							url: '/pages/yimiaoyuyue/yimiaoyuyue'
						})
					} else {
						uni.showToast({
							title:'请完善表单',
							icon:'none',
						})
					}
				});
			},
			// 页面跳转代码
			changeUser(){
				uni.navigateTo({
					url:'/pages/writeUserInfo/writeUserInfo'
				})
			}
		},
		onReady() {
				this.$refs.uForm.setRules(this.rules);
		},
		onLoad(){
			uni.getStorage({
				key:'hospital',
				success:res=>{
					this.vaccine.address = res.data
				},
				fail:err=>{
					uni.showToast({
						title:"门诊获取失败",
						icon:'none'
					})
				}
			})
			uni.getStorage({
				key:'username',
				success:res=>{
					this.vaccine.username = res.data.name
				},
				fail:err=>{
					uni.showToast({
						title:"接种人获取失败",
						icon:'none'
					})
				}
			})
		}
	}
</script>

<style scoped lang="scss">
.wrap{
	padding: 40rpx;
}
.tips{
	font-size: 24rpx;
	margin-left: 30rpx;
	color: #999999;
}
</style>
